<template>
  <div>
    <!-- <div class="hd">
      <p>传智播客.黑马程序猿vue.js</p>
    </div> -->
    <Header></Header>
    <div class="lunbotu">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, i) in slideshow" :key="i">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="main">
      <div class="main-item" @click="$router.push('/newslist')">
        <van-image round width="3rem" height="3rem" fit="cover" :src="img1" />
        <p>新闻资讯</p>
      </div>
      <div class="main-item" @click="$router.push('/photolist')">
        <van-image round width="3rem" height="3rem" fit="cover" :src="img2" />
        <p>图片加载</p>
      </div>
      <div class="main-item" @click="$router.push('/goodslist')">
        <van-image round width="3rem" height="3rem" fit="cover" :src="img3" />
        <p>商品展示</p>
      </div>
      <div class="main-item">
        <van-image round width="3rem" height="3rem" fit="cover" :src="img4" />
        <p>留言反馈</p>
      </div>
      <div class="main-item">
        <van-image round width="3rem" height="3rem" fit="cover" :src="img5" />
        <p>搜索资讯</p>
      </div>
      <div class="main-item">
        <van-image round width="3rem" height="3rem" fit="cover" :src="img6" />
        <p>联系我们</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getlunbo } from "../api/index";
import Header from "../components/header.vue";
export default {
  components: { Header },
  data() {
    return {
      slideshow: [],
      img1: require("../style/images/menu3.png"),
      img2: require("../style/images/menu4.png"),
      img3: require("../style/images/menu5.png"),
      img4: require("../style/images/menu6.png"),
      img5: require("../style/images/menu9.png"),
      img6: require("../style/images/menu10.png"),
    };
  },

  async created() {
    const { data: res } = await getlunbo();

    this.slideshow = res.message;

    console.log(this.slideshow);
  },
};
</script>

<style lang="less" scoped>
.hd {
  height: 50px;
  background-color: #26a2ff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.lunbotu {
  height: 200px;
  // background-color: red;
  .van-swipe-item {
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.main {
  display: flex;

  flex-wrap: wrap;
  .main-item {
    width: 33.3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    p {
      padding-top: 10px;
    }
  }
}
</style>
